<template>
  <div class="bigbox">
    <!-- 盒子头部 -->
     <div class="topbox">
      <div style="display: flex;justify-content: space-between;">
        <span>
          <span class="span" style="font-size: 14px;color: #606266;">维护机构</span> 
        <span class="span">  
          <el-select v-model="form.manageNo" placeholder="请选择" size="small">
            <el-option
            class="options"
              v-for="(item,index) in qiyelist"
              :key="index"
              :label="item.bizOrgName"
              :value="item.bizOrgNo">
            </el-option>
          </el-select>
        </span>
        <span class="span" style="font-size: 14px;color: #606266;">业务类型</span>
        <span class="span">
          <el-select v-model="form.instructionType" placeholder="请选择" size="small">
            <el-option
            class="options"
              v-for="(item,index) in yewulist"
              :key="index"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </span>
        <span style="margin-left: 20px;font-size: 14px;color: #606266;" class="span">设备类型</span>
        <span class="span">
          <el-select v-model="form.deviceType" placeholder="请选择" size="small">
            <el-option
            class="options"
              v-for="item in shebeilist"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </span>
        <span class="span" style="font-size: 14px;color: #606266;">指导书名称</span>
        <span class="span">
          <el-input v-model="form.instructionName" placeholder="请输入内容" size="small" style="width: 200px;"></el-input>
        </span>
        </span>
        <span class="anniu">
          <button class="button submit" @click="submit">查询</button>
        </span>
      </div>
     </div>
     <!-- 盒子主体 -->
     <div class="zhutibox">
        <!-- 封装导出/刷新/以及调节表格密度 -->
        <div class="atopanniu">
          <div>
            <button v-if="form.manageNo=='88000285'" class="fuzhi" @click="dialogVisibles=true">复制</button>
            <button class="xinzen" @click="xinzen"><i class="el-icon-plus"></i>新增</button>
          </div>
          <TopTitle @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTitle>
        </div>
        <!-- 表格区域 -->
        <div class="table">
          <template>
            <el-table
            :size="iissize"
            border
           :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
              :data="tableData"
              style="width: 100%">
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
              width="100"
              align="center"
                type="index"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="manageName"
                align="center"
                label="维护机构"
                width="180">
              </el-table-column>
              <el-table-column
                prop="instructionType"
                label="业务类型"
                align="center">
                <template #default="{row}">
                  <span>{{ yewulist.filter(ele=>ele.value==row.instructionType)[0]?.text }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceTypeName"
                label="设备类型"
                width="180"
                align="center">
              </el-table-column>
              <el-table-column
                prop="instructionName"
                label="指导书名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="content"
                label="作业内容"
                width="150">
                <template #default="{row}">
                  <el-popover
                    placement="bottom"
                    title=""
                    width="200"
                    trigger="click">
                      <div class="lines">作业内容</div>
                      <el-input
                      style="margin-top: 10px;"
                        type="textarea"
                        :rows="4"
                        placeholder=""
                        v-model="row.content">
                      </el-input>
                    <el-button type="text" slot="reference" class="yichu">{{ row.content }}</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="checkTypeName"
                label="检查类型"
                align="center">
              </el-table-column>
              <el-table-column
                prop="checkStandard"
                label="检查标准"
                align="center"
                width="150">
                <template #default="{row}">
                  <el-popover
                    placement="bottom"
                    title=""
                    width="200"
                    trigger="click">
                      <div class="lines">检查标准</div>
                      <el-input
                      style="margin-top: 10px;"
                        type="textarea"
                        :rows="4"
                        placeholder=""
                        v-model="row.checkStandard">
                      </el-input>
                    <el-button type="text" slot="reference" class="yichu">{{ row.checkStandard }}</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="lastOperateTime"
                label="编辑时间"
                align="center"
                width="200">
              </el-table-column>
              <el-table-column
                label="操作"
                align="center">
                <template #default="{row}">
                  <span>
                    <el-button type="text" @click="bianji(row)">编辑</el-button>
                    <el-button type="text" @click="delzhidao(row.id)">删除</el-button>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="formlist._pageNo"
                :page-size="10"
                @current-change="getdatalist"
                :total="+totalCount">
              </el-pagination>
        </div>
        <!-- 新增/编辑弹框区域 -->
        <div>
          <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="50%"
              >
              <div class="dialog">
                <el-form :model="diaobj" :label-position="labelPosition" label-width="100px">
                  <el-form-item label="业务类型">
                    <el-radio-group v-model="diaobj.instructionType" ref="radioGroup" filterable  @change="cgangegroup">
                      <el-radio v-for="(item,index) in yewulist" :key="index" :label="item.value" >{{ item.text }}</el-radio>
                      <!-- <el-radio label="能耗管理"></el-radio>
                      <el-radio label="光伏管理"></el-radio>
                      <el-radio label="储能管理"></el-radio> -->
                    </el-radio-group>
                  </el-form-item>
                  <el-row >
                    <el-col :span="12">
                    <el-form-item label="维护机构 ">
                      <el-select v-model="diaobj.manageNo" placeholder="请选择" size="small" style="width: 100%; " >
                        <el-option
                          class="options"
                          v-for="(item,index) in qiyelist"
                          :key="index"
                          :label="item.bizOrgName"
                          :value="item.bizOrgNo">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型">
                      <el-select v-model="diaobj.deviceType" placeholder="请选择" size="small" style="width: 100%; " @change="changeshebei">
                        <el-option
                        class="options"
                          v-for="(item,index) in diashebeilist"
                          :key="index"
                          :label="item.text"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="12">
                    <el-form-item label="指导书名称">
                      <el-input v-model="diaobj.instructionName" style="width: 100%; " size="small"></el-input>
                    </el-form-item>
                  </el-col >
                  <el-col :span="12">
                    <el-form-item label="检查类型">
                      <el-radio-group v-model="diaobj.checkType" ref="radioGroups" style="width: 100%; ">
                      <el-radio v-for="(item,index) in jiancelist" :key="index" :label="item.value">{{ item.text }}</el-radio>
                    </el-radio-group>
                    </el-form-item>
                  </el-col >
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                    <el-form-item label="作业内容">
                    <el-input
                        type="textarea"
                        style="width: 100%; "
                        v-model="diaobj.content">
                      </el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
                    <el-form-item label="检查标准">
                    <el-input
                        type="textarea"
                        style="width: 100%; "
                        :rows="2"
                        v-model="diaobj.checkStandard">
                      </el-input>
                  </el-form-item>
                  <template v-if="diaobj.checkType=='1'">
                    <el-form-item label="危害">
                    <el-input
                        type="textarea"
                        style="width: 100%; "
                        :rows="2"
                        v-model="diaobj.danger">
                      </el-input>
                  </el-form-item>
                  <el-form-item label="处理意见">
                    <el-input
                        type="textarea"
                        style="width: 100%; "
                        :rows="2"
                        v-model="diaobj.handlingSuggestion">
                      </el-input>
                  </el-form-item>
                  </template>
                  <el-col :span="12">
                   <el-form-item label="编辑时间">
                     <el-input v-model="diaobj.lastOperateTime" style="width: 100%; " size="small"></el-input>
                   </el-form-item>
                  </el-col>
                  <el-col :span="12">
                   <el-form-item label="排序号">
                     <el-input v-model="diaobj.orderNo" style="width: 100%; " size="small"></el-input>
                   </el-form-item>
                  </el-col>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="quxiao" class="button">取 消</el-button>
                <el-button type="primary" @click="reastns" class="button">确 定</el-button>
              </span>
            </el-dialog>
        </div>
        <!-- 赋值巡视作业指导书 -->
        <div>
          <el-dialog
              title=""
              :visible.sync="dialogVisibles"
              width="38%">
               <div class="fuzhiss">
                 <div style="margin-bottom: 20px;">复制作业指导书</div>
                 <div>
                  <span class="span">从</span>
                   <span class="span">
                    <el-select v-model="fuzhiobj.fromManageNo" placeholder="请选择" size="small" style="width: 150px;">
                        <el-option
                        class="options"
                          v-for="(item,index) in qiyelist"
                          :key="index"
                          :label="item.bizOrgName"
                          :value="item.bizOrgNo">
                        </el-option>
                      </el-select>
                   </span>
                   <span class="span">复制至</span>
                   <span class="span">
                    <el-select v-model="fuzhiobj.toManageNo" placeholder="请选择" size="small" style="width: 150px;">
                      <el-option
                      class="options"
                        v-for="(item,index) in arrlist"
                        :key="index"
                        :label="item.bizOrgName"
                        :value="item.bizOrgNo">
                      </el-option>
                    </el-select>
                   </span>
                 </div>
               </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="gofuzhi" style="width: 70px;height: 30px;">开始复制</el-button>
              </span>
            </el-dialog>
        </div>
     </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import {
  getzhidaolist, getqiyexialalist, delzhidaoapi, exporttableapi, fuzhizhidaoapi,
  getyewuleiapi, getzidianxialaapi, getbiglittleapi,postandputapi,getarrdanweilistapi
} from '@/api/guidelines'
import {
  getDictionaryApi
} from '@/api/customerFile'
import {getloginuserapi,getyonghuxialaapi} from '@/api/cycle'
import  TopTitle from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle
},
  data() {
    return {
      labelPosition:'right',
      diaobj:{instructionType:'10',checkType:'1',manageNo:'',lastOperateTime:''},
      value1:[],
      form:{manageNo:''},
      qiyelist: [],
      iissize: 'medium',
      formlist: {
        _pageNo: 0,
        _pageSize:10
      },
      tableData: [],
      shebeilist: [],
      totalCount: '',
      dialogVisible: false,
      loading: false,
      dialogVisibles: false,
      fuzhiobj: {},
      yewulist: [],
      jiancelist: [],
      deviceCate: {
        deviceCategory: '',
        deviceClassname:''
      },
      arrlist:[],
      diashebeilist:[]
    };
  },

  async mounted() {
    const re = await getloginuserapi()
    if (re.data.entity.orgType!=='04') {
      const res = await getqiyexialalist()
    this.form.manageNo=res.data.list[0].bizOrgNo
      this.qiyelist = res.data.list
    } else {
      const res = await getyonghuxialaapi()
      this.form.manageNo=res.data.list[0].bizOrgNo
      this.qiyelist = res.data.list
    }

    const ress = await getyewuleiapi({ dictType: 'XSGL_ZYZDSLX' })
    this.yewulist = ress.data.list
    const resss = await getzidianxialaapi({ dictType: 'XSGL_JCLX' })
    this.jiancelist = resss.data.list
    // const { data: { list } } = await getzidianxialaapi({ dictType: 'XSGL_SBLX' })
    // this.shebeilist=list
    this.getdatalist()
    this.gettime()

    const arrdanweilist = await getarrdanweilistapi()
    this.arrlist=arrdanweilist.data.list
  },
  methods: {
    // 封装获取表格数据
    async getdatalist() {
      // this.loading=true
      const {data:{totalCount,list}}= await getzhidaolist({ _pageNo: this.formlist._pageNo - 1, _pageSize: this.formlist._pageSize, ...this.form })
      this.totalCount=totalCount
      this.tableData = list
      this.loading=false
    },
    // 保存新增/修改
    async reastns() {
      await postandputapi({ ...this.deviceCate, ...this.diaobj,instructionTypeName:'' })
      this.dialogVisible = false
      this.$message.success('操作成功')
      this.getdatalist()
      this.diaobj.deviceType = ''
      this.diaobj.instructionName = ''
      this.diaobj.content = ''
      this.diaobj.checkStandard = ''
      this.diaobj.danger = ''
      this.diaobj.handlingSuggestion = ''
      this.diaobj.orderNo=''
      this.deviceCate = {}
    },
    // 获取弹窗设备下拉
    async getdiadevicelist(val){
      const parentDictValue=val=='30'?'GFSB':'PDSB'
       const {data:{list}}=await getDictionaryApi('XSGL_SBLX',parentDictValue)
       this.diashebeilist=list
    },
    cgangegroup(val){
      this.$set(this.diaobj,'deviceType','')
      this.getdiadevicelist(val)
    },
    // 新增/编辑指导书设备下拉
    async changeshebei(val) {
      const res = await getbiglittleapi({ attributeCode: 'content1', dictType: 'XSGL_SBLX', dictValue: val })
      const ress = await getbiglittleapi({ attributeCode: 'content2', dictType: 'XSGL_SBLX', dictValue: val })
      this.deviceCate.deviceCategory = ress.data.content
      this.deviceCate.deviceClassname=res.data.content
    },
    //查询功能
    submit() {
      this.getdatalist()
    },
    //编辑功能
    async bianji(row) {
      await this.getdiadevicelist(row.instructionType)
      this.diaobj={...row}
      this.dialogVisible=true
    },
       // 调节表格密度
       command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 删除指导书接口
    delzhidao(id) {
      // delzhidaoapi
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delzhidaoapi({id:id})
        this.$message.success('删除成功')
        this.getdatalist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // f复制接口
    async gofuzhi() {
      await fuzhizhidaoapi(this.fuzhiobj)
      this.$message.success('复制成功')
      this.dialogVisibles = false
      this.getdatalist()
    },
    // 导出
    async daochu() {
      const res = await exporttableapi({...this.form, isParams: true})
      console.log(res);
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '巡视作业指导书.xls')
     },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 新增/编辑弹框取消
    quxiao() {
      this.dialogVisible = false
      this.diaobj.deviceType = ''
      this.diaobj.instructionName = ''
      this.diaobj.content = ''
      this.diaobj.checkStandard = ''
      this.diaobj.danger = ''
      this.diaobj.handlingSuggestion = ''
      this.diaobj.orderNo=''
      this.deviceCate = {}
    },
    //  获取当前时间错
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate()<10?'0'+date.getDate():date.getDate()
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds() 
      this.diaobj.lastOperateTime = year + '-' + month + '-' + day+' ' + hour + ':' + minutes+':'+seconds
    },
    // 新增按钮
    xinzen() {
      this.dialogVisible=true
       this.diaobj.instructionType = '10'
       this.getdiadevicelist(this.diaobj.instructionType)
      this.diaobj.checkType = '1'
      this.gettime()
      this.diaobj.manageNo=this.form.manageNo
    }
  },
  watch: {
    // dialogVisible(val) {
    //   if (val) {
    //     this.diaobj.manageNo=this.form.manageNo
    //   } else {
    //     this.diaobj.manageNo=''
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.options{
  padding-left: 10px;
}
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
    .topbox{
      height: 80px;
      background-color: #fff;
      padding: 0 20px;
      line-height: 80px;
      .span{
        margin-right: 20px;
      }
      .anniu{
        .button{
        width: 60px;
        height: 30px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
      .submit{
        color: #fff;
        background-color: #409eff;
        margin-left: 10px;
      }
      }
      
    }
    .zhutibox{
      margin-top: 10px;
      padding: 20px;
      background-color: #fff;
      height:calc(100% - 90px);
      position: relative;
      .atopanniu{
        display: flex;
        justify-content: flex-end;
        .fuzhi{
          width: 60px;
          height: 30px;
          background-color: #f2bd42;
          border-radius: 3px;
          color: #fff;
          border: none;
        }
        .xinzen{
          width: 60px;
          height: 30px;
          background-color: #409eff;
          border: none;
          border-radius: 3px;
          color: #fff;
          margin: 0 10px;
        }
      }
      .table{
        height: 90%;
        margin:  10px 0;
        .lines{ 
          border-bottom: 1px solid #ccc;
          margin-bottom: 10px;
        }
        .yichu{
          width: 140px;
          white-space: nowrap;
          text-align: left;
          overflow: hidden;  // 超出的文本隐藏
          text-overflow: ellipsis; // 溢出用省略号显示
        }
      }
      .fenye{
        position: absolute;
        bottom: 10px;
        right: 20px;
      }
      .dialog{
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding-bottom: 50px;
      }
      .button{
        width: 60px;
        height: 30px;
      }
      .fuzhiss{
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 3px;
        .span{
          margin-right: 15px;
        }
      }
    }
 
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-radio{
  margin-right: 20px;
}
::v-deep .el-textarea__inner{
  margin: 10px 0; 
}
</style>